<template>
  <demoBlock title="自定义图标" padding class="demo-radio">
    <vcu-radio-group v-model="checked">
      <vcu-radio name="1">
        单选框 1
        <template #icon="props">
          <vcu-icon
            name="favor"
            :class="{
              'active-icon': props.checked,
              'inactive-icon': !props.checked,
            }"
          />
        </template>
      </vcu-radio>
      <vcu-radio name="2">
        单选框 2
        <template #icon="props">
          <vcu-icon
            name="favor"
            :class="{
              'active-icon': props.checked,
              'inactive-icon': !props.checked,
            }"
          />
        </template>
      </vcu-radio>
    </vcu-radio-group>
  </demoBlock>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const checked = ref("1");
    return { checked };
  },
});
</script>
<style lang="less" scoped>
.demo-radio {
  :deep(.vcu-radio__icon .vcu-icon) {
    background: none;
    border: none;
    &.inactive-icon {
      color: gray;
    }
  }
  :deep(.vcu-radio__icon--checked .vcu-icon) {
    background: none;
    border: none;
    &.active-icon {
      color: red;
    }
  }
}
</style>